<template>
  <flexbox slot="reference" :class="[disabled ? 'is_disabled' : 'is_valid']"
           wrap="wrap" class="user-container xh-form-border"
           @click="contentClick">
    <div v-for="(item, index) in dataValue" :key="index" class="user-item"
         @click.stop="deleteinfo(index)">
      {{ getShowName(item) }}
      <i class="delete-icon el-icon-close"/>
    </div>
    <div v-if="dataValue.length == 0" class="add-item">
      +添加
    </div>

    <crm-relative v-if="!disabled && viewLoaded" ref="crmrelative"
                  v-model:visible="showSelectView"
                  :crm-type="crmType"
                  :action="relationAction"
                  :selected-data="selectedData"
                  @changeCheckout="checkInfos"/>
  </flexbox>
</template>


<script setup>
import {computed, getCurrentInstance,watch, defineAsyncComponent, ref, onMounted} from "vue";

import CrmRelative from './CrmRelative.vue'

defineOptions({
  name: 'CrmRelativeCell', // 相关模块CRMCell 单类型 自定义字段用
})

const props = defineProps({
  relation: {
    // 相关ID
    type: Object,
    default: () => {
      return {}
    }
  },
  relativeType: String,

  // 来自arrayMixin中
  value: {
    type: Array,
    default: () => {
      return []
    }
  },
  /** 索引值 用于更新数据 */
  index: Number,
  /** 包含数据源 */
  item: Object,
  disabled: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['value-change'])


const showSelectView = ref(false) // 内容
const viewLoaded = ref(false)
const radio = ref(true) // 是否单选
const relationAction = ref({type: 'default'})
const dataValue = ref([])


// 如果有相关ID  展示相关效果 例如客户下的商机和合同
const isRelationShow = computed(() => {
  return props.item && props.item.data && props.item.data.relation_id
})
const selectedData = computed(() => {
  const crmObj = {}
  crmObj[crmType.value] = dataValue.value
  return crmObj
})

const crmType = computed(() => {
  if (props.relativeType) {
    return props.relativeType
  }
  return props.item.data.formType
})


onMounted(() => {
  if (props.relation && props.relation.moduleType) {
    relationAction.value = {type: 'condition', data: props.relation}
  } else {
    relationAction.value = {type: 'default'}
  }
  dataValue.value = props.value
})


watch(() => props.relation, (val) => {
  if (val.moduleType) {
    relationAction.value = {type: 'condition', data: val}
  } else {
    relationAction.value = {type: 'default'}
  }
})

watch(() => props.value, function(val) {
  dataValue.valued = val
})






// 输入的值
function valueChange(val) {
  emits('value-change', {
    index: props.index,
    value: val
  })
}

/** 选中 */
function checkInfos(data) {
  dataValue.value = data.data ? data.data : []
  emits('value-change', {
    index: props.index,
    value: data.data
  })
}

// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus

/** 删除 */
function deleteinfo(index) {
  if (props.disabled) {
    return
  }

  if (radio.value && cxt.refs.crmrelative) {
    // 如果单选告知删除
    cxt.refs.crmrelative.setSelections([])
  }
  if (dataValue.value.length === 1) {
    dataValue.value = []
  } else {
    dataValue.value.splice(index, 1)
  }

  emits('value-change', {
    index: props.index,
    value: dataValue.value
  })
}
function contentClick() {
  viewLoaded.value = true
  showSelectView.value = true
}
function getShowName(data) {
  if (crmType.value === 'receivables') {
    return data.number
  } else if (crmType.value === 'customer') {
    return data.customerName
  } else if (crmType.value === 'business') {
    return data.businessName
  } else if (crmType.value === 'contract') {
    return data.contractNum || data.num
  }
  return data.name
}

</script>

<style lang="scss" scoped>
.user-container {
  min-height: 34px;
  position: relative;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid #ddd;
  color: #333333;
  line-height: 15px;
  cursor: pointer;

  .user-item {
    padding: 5px;
    background-color: #e2ebf9;
    border-radius: 3px;
    margin: 3px;
    cursor: pointer;
  }

  .add-item {
    padding: 5px;
    color: $xr-color-text-placeholder;
    cursor: pointer;
  }

  .delete-icon {
    color: #999;
    cursor: pointer;
  }
}

.user-container.is_disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  cursor: not-allowed;

  .user-item {
    background-color: #f0f4f8ea;
    color: #c0c4cc;
    cursor: not-allowed;
  }

  .delete-icon {
    color: #c0c4cc;
    cursor: not-allowed;
  }

  .add-item {
    color: #c0c4cc;
    cursor: not-allowed;
  }
}

.user-container.is_valid:hover {
  border-color: #c0c4cc;
}
</style>
